<script lang="ts" setup>
import { ref, computed } from 'vue';
import { ElInput, ElButton } from 'element-plus';
import { useAccessStore } from '@/store';
import { AssetsIcon, Icon } from '@/components/Basic';

defineOptions({
  name: 'Dashboard',
});
const accessStore = useAccessStore();
const testDemo = ref('234');

const apiUrl = computed(() => {
  return import.meta.env.VITE_PORT;
});
</script>
<template>
  <div>
    {{ apiUrl }}
    <ElInput v-model="testDemo" />

    <Icon icon="mdi:tea" />
    <AssetsIcon name="menu:vue" />
    <div class="flex items-center gap-3 py-4">
      <h3>权限验证：</h3>
      <ElButton v-permission="'dashboard:add'">新增</ElButton>
      <ElButton v-permission="'dashboard:download'">下载</ElButton>
      <ElButton v-permission="'dashboard:delete'">删除</ElButton>
      <ElButton v-permission="'dashboard:edit'">编辑</ElButton>
      <ElButton v-permission="'dashboard:export'">导出</ElButton>
    </div>
    <div>按钮权限列表：{{ accessStore.accessPerms }}</div>
  </div>
</template>
